<template>
  <div
    :style="{
      paddingBottom: tempData.paddingBottom + 'px',
      paddingLeft: tempData.paddingTwice + 'px',
      paddingRight: tempData.paddingTwice + 'px',
      paddingTop: tempData.paddingTop + 'px',
      boxSizing: 'border-box',
    }"
  >
    <div
      class="boxs"
      :style="{
        borderTopLeftRadius: tempData.radiusNumTop + 'px',
        borderTopRightRadius: tempData.radiusNumTop + 'px',
        borderBottomLeftRadius: tempData.radiusNumBottom + 'px',
        borderBottomRightRadius: tempData.radiusNumBottom + 'px',
        background: '#fff',
      }"
    >
      <img src="@/assets/didaima/panel/warning.png" alt="" />
      <div class="texts">
        <p class="title">检测到您的流量已使用完请充值</p>
        <p class="text">充值套餐后才可以正常使用网络哦</p>
      </div>
      <div class="btns"> 立即充值 </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'

  const props = defineProps({
    // 选中的当前组件参数
    compObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const tempData: any = ref({})
  watch(
    () => props.compObj,
    (newVal, oldVal) => {
      tempData.value = JSON.parse(JSON.stringify(newVal))
    },
    { immediate: true, deep: true }
  )
</script>

<style scoped lang="less">
  .boxs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 10px;
    box-sizing: border-box;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    .texts {
      flex-grow: 1;
      .title {
        font-size: 15px;
        line-height: 16px;
        font-weight: bold;
        color: #000;
      }
      .text {
        color: #82848a;
        font-size: 12px;
        line-height: 13px;
        margin-top: 2px;
      }
    }
    .btns {
      border: 1px solid #2979ff;
      text-align: center;
      width: 69px;
      line-height: 30px;
      height: 32px;
      border-radius: 5px;
      color: #3c9cff;
      font-size: 12px;
    }
  }
</style>
